<template>
  <div class="article">
   <div class="quanbu">
    <img :src="getimg(article[0].healthPic)" />
           <h3>{{article[0].healthTitle}}</h3>
           <p>{{article[0].healthWord}}</p>
           <p>{{article[0].healthWord2}}</p>
           <p>{{article[0].healthWord3}}</p>
           <p>{{article[0].healthWord4}}</p>
           <h4>{{article[0].smallTitle1}}</h4>
           <p>{{article[0].healthWord5}}</p>
           <h4>{{article[0].smallTitle2}}</h4>
            <p>{{article[0].healthWord6}}</p>
    </div>
    <articles :headPic="headPic" :userName="userName"></articles>
  </div>
</template>
<script>
import articles from "../components/articles.vue";
import "../assets/js/jinji.js";
export default {
  data() {
    return {
     article: [],
    }
  },
   components: {
   articles
  },
  props:["headPic", "userName"],
  //组件创建完成后执行的操作
  created() {
    var peopleId =this.$route.params.peopleId
    this.$axios
      .get("http://localhost:3000/menu/peopledetail/" + peopleId)
      .then(res => {
        console.log("查询结果：", res.data.data);
        this.article = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods:{
      getimg(pic){
          return require('../assets/images/' + pic)
      }
  }
};
</script>
<style lang="css" scoped>
    h3 {
            width: 70%;
            text-align: center;
             font-size:24px;
             font-weight: bolder;
             margin-left:130px;

        }

        h4 {
            margin-top: 10px;
             font-size:18px;
              font-weight: bolder;
              margin-left:40px;
        }

        p{
            margin-top: 20px;
            text-indent: 2em;
            font-size:16px;
            padding-left:50px;
            padding-top:6px;
            padding-right:50px;
        }

        .quanbu {
            width: 70%;
            min-width: 1000px;
            background-color: #fff;
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 50px;
        }

        .quanbu img {
            width: 200px;
            height: 80px;
        }
     #icon{
            float: left;
            width: 99%;
            margin: 10px auto;
            border: 1px solid #ccc;
            margin-top: 50px;
        }

        #icon div {
            float: right;
            width: 7%;
        }

        #icon div i {
            position: relative;
            left: 20%;
            margin-left: 10px;
        }

        #icon i:hover {
            color: orangered !important;
            cursor: pointer;

        }

        #likeNum {
            font-size: 20px;
        }

        #comments {
            float: left;
            margin: 20px 80px;
            display: none;
            width: 70%;
        }

        #comments .bos {
            float: left;
            margin: 0 auto;
            width: 100%;
        }

        #comments .bos a {
            float: right;
            font-size: 14px;
        }

        #comments button {
            float: right;
        }

        #comments ul {
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: #fff;
            width: 100%;
        }

        #comments ul li {
            width: 100%;
            border: 1px solid;
            margin-left: 70px;
            margin-top: 30px;
        }

        #comments ul li p {
            padding: 20px 10px;
            background: linear-gradient(45deg, rgb(160, 190, 117), rgb(255, 255, 255)) fixed;
        }

        #comments ul li #content {
            margin: 20px 50px;
        }

        #comments #btn {
            float: right;
            background-color: rgb(160, 190, 117);
            width: 100px;
            height: 25px;
            border: 1px solid rgb(160, 190, 117);
        }
</style>